.modal {
  h4 {
    padding: 1rem;
    font-size: 1.25rem;
    text-align: center;
    text-overflow: ellipsis;
    overflow-x: hidden;
    white-space: nowrap;
  }
    
  border: 2px solid rgb(231, 231, 231);
  position: fixed;
  display: flex;
  background: $background-bg;
  justify-content: center;
  align-items: center;
  height: 30rem;
  width: 24rem;
  left: 40%;
  top: 30%;
  border-radius: 2rem;
  padding-left: .5rem;
  .containerNetworks {
    overflow-y: scroll;
    height: 20rem;
    width: 23rem;
    margin: 1rem;
    justify-content: center;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    &::-webkit-scrollbar {
        width: 2px;
        background-color: rgb(49, 49, 49);
        margin-right: 1rem;
        height: 10rem;
      }
    &::-webkit-scrollbar-thumb {
      background-color: rgb(235, 235, 235);
    }
  }
}

.overlay {
  position: fixed;
  display: flex;
  background: hsla(0, 0%, 0%, 0.342);
  width: 100%;
  height: 100%;
  left: 0%;
  top: 0%;
}

.buttonDiv {
  display: flex;
  justify-content: center;
  padding-top: 1rem;
}

.networkDiv {
  display: flex;
  justify-content: space-between;
  background-color: hsl(210, 15.2%, 18%);
  margin-top: .5rem;
  border: 2px solid rgb(214, 214, 214);
  border-radius: .5rem;
  width: 22rem;
  height: 2.75rem;
  padding: 0rem 0rem 0rem .5rem;
  transition: all 0.3s ease-in-out;
  &:hover {
      background-color: hsl(210, 16%, 35%);
    }
    #networkName {
      width: 12rem;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      margin-top: .6rem;
      font-size: 1rem;
      height: 2.5rem;
      cursor: pointer;
    }
  
}